/*图片水平垂直居中 
<div class="piccentre">
    <img src="1.jpg"/>
</div>
*/
.piccentre{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.piccentre > img{
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*鼠标悬浮颜色变深
<div class="hoverdarken">
    <a class="darken" href="#">
        <img src="news-11.jpg">
    </a>
</div>
*/
.hoverdarken .darken{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.hoverdarken .message{
    position: absolute;
    top:0;
    left: 0;
    color: white;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hoverdarken .message .title{
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    color: #fff;
}
.hoverdarken .darken::after,
.hoverdarken .darkenline::after{
    position: absolute;
    top:0;left:0;
    content:'';
    display: block;
    height: 100%;
    width: 100%;
}
.hoverdarken .darken::after{
    opacity: .35;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000);
    transition: all .3s;
}
.hoverdarken:hover .darken::after,
.hoverdarken.active .darken::after{
    opacity: .55;
}
.hoverdarken .darkenline::after{
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75));
};


/*鼠标悬浮图片放大
<div class="hoverthumb or hoverthumbvert">
    <img src="" alt="">
</div>
*/
.hoverthumb,.hoverthumbvert{
    display: block;
    position: relative;
    overflow: hidden;
}
.hoverthumb img,
.hoverthumbvert img{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    transition: all 0.5s ease;
}
.hoverthumb img{
    height: 100%;
}
.hoverthumbvert img{
    width: 100%;
}
.hoverthumbvert:hover img,
.hoverthumbvert.active img{
    width: 120%!important;
}
.hoverthumb:hover img,
.hoverthumb.active img{
    height: 120%!important;
    
}
/*图片拉伸
 *图片水平拉伸(高100%)
<div class="picthumb">
    <img src="" alt="">
</div>
 *图片垂直拉伸(宽100%)
<div class="picthumbvert">
    <img src="" alt="">
</div>

*/
.picthumb,.picthumbvert{
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.picthumb img,.picthumbvert img{
    position: absolute;
}
.picthumb img{
    height: 100%;
    left:50%;
    transform: translateX(-50%);
}
.picthumbvert img{
    width: 100%;
    top:50%;
    transform: translateY(-50%);
}

/*自适应正方形容器
<div class="squarewrap">
    <div class="square">
        content...
    </div>
</div>
*/
.squarewrap{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.squarewrap .square{
    width: 100%;
    height: 100%;
    position: absolute;
}

/*视频中心按钮
<a class="videothumb" href="#">
  <div class="picthumb rounded-5 overflow-hidden">
      <img src="assets/img/news-1.jpg" alt="">

      <div class="videobutton">
          <div class="videobuttontwo">
              <div class="videoplay">
                  <span class="videoplayicon"></span>
              </div>
          </div>
      </div>
  </div>
</a>
*/
.videothumb {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 100%;
}
.videothumb .videobutton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.videothumb .videobutton .videobuttontwo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.videothumb .videobutton .videobuttontwo .videoplay,
.videothumb .videobutton .videobuttontwo .videoplaysm{
    //background: linear-gradient(to top, #FE4F70 0%, #FFA387 100%);
    background: linear-gradient(to top, #FFA387 0%, #ffc4a0 100%);
    border: 3px solid #fff;
    border-radius: 50%;
    transition: all 1s cubic-bezier(0, 0, 0.2, 1) !important;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07);
}
.videothumb .videobutton .videobuttontwo .videoplay {
    width: 78px;
    height: 78px;
    // background: #ffc4a0;
}
.videothumb .videobutton .videobuttontwo .videoplaysm {
    width: 58px;
    height: 58px;
}
.videothumb .videobutton .videobuttontwo .videoplayicon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    margin-left: 1px;
}
.videothumb .videobutton .videobuttontwo .videoplayicon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fff;
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 19px;
    border-left-color: #ffffff;
}
.videothumb:hover .videoplay, 
.videothumb:hover .videoplaysm {
    transform: scale3d(1.15, 1.15, 1.15);
}


/*鼠标悬浮显示文字
<a href="#" class="hoverinner">
    <img src="1.png" alt="">
    <div class="inner">
      <h3 class="">Business</h3>
    </div>
</a>
*/
.hoverinner{
    position: relative;
}
.hoverinner .inner {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 30px;
    color: #fff;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.hoverinner:hover .inner,
.hoverinner.active .inner {
    opacity: 1;
    visibility: visible;
}
.hoverinner::after {
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0.3;
    transition: all 0.3s ease-in-out;
}
.hoverinner:hover::after,
.hoverinner.active::after {
    opacity: 1;
}

/*post 格式
<a href="#" class="hoverformat">
    <img src="1.png" alt="">
    <span class="format">
        <i class="bi bi-camera-video"></i>
    </span>
</a>
*/
.hoverformat .format {
    position: absolute;
    left: 25px;
    top: 25px;
    transform: translate(-50%, -50%);
    opacity: .5;
    transition: all 0.7s ease-in-out;
    color: #fff;
    font-size: 24px;
    z-index: 1;
}
.hoverformat:hover .format{
    opacity: .8;
}